<template>
  <div id="consumerBack"> <!--vue组件中不能存在多个div并行-->
    <div style="padding: 10px 0">
      <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="searchData.account"></el-input>
      <!--            <el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message" class="ml-5"></el-input>
                  <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5"></el-input>-->
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0;">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item style="margin-top: 33px">
          <button class="icon-btn add-btn" @click="handleAdd">
            <div class="add-icon"></div>
            <div class="btn-txt">新增用户</div>
          </button>
        </el-form-item>
        <el-form-item >
          <el-popconfirm
                  class="ml-5"
                  title="您确定删除吗？"
                  @confirm="delBatch"
          >
            <button class="noselect" slot="reference">
              <span class="text" >批量删除</span>
              <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>
          </span>
            </button>
          </el-popconfirm>
        </el-form-item>
      </el-form>

      <el-button style="margin-left: 700px" class="ml-5">导入<i class="el-icon-bottom"></i> </el-button>
      <el-button >导出<i class="el-icon-top"></i> </el-button>

    </div>
<!--    <div style="margin: 10px 0">-->
<!--      <el-button type="primary" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i> </el-button>-->
<!--      <el-popconfirm-->
<!--          class="ml-5"-->
<!--          title="您确定删除吗？"-->
<!--          @confirm="delBatch"-->
<!--      >-->
<!--        <el-button type="danger" slot="reference">批量删除<i class="el-icon-remove-outline"></i> </el-button>-->
<!--      </el-popconfirm>-->
<!--      <el-button type="danger" class="ml-5">导入<i class="el-icon-bottom"></i> </el-button>-->
<!--      <el-button type="danger">导出<i class="el-icon-top"></i> </el-button>-->
<!--    </div>-->
    <el-table :data="tableData" border stripe :header-cell-class-name="headerBg"  @selection-change="handleSelectionChange">>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="ID" width="70">
      </el-table-column>
      <el-table-column prop="account" label="用户账号" width="140">
      </el-table-column>
      <el-table-column prop="password" label="密码" width="140">
      </el-table-column>
      <el-table-column prop="phoneNumber" label="手机号" width="140">
      </el-table-column>
      <el-table-column prop="state" label="状态" width="70">
      </el-table-column>
      <el-table-column prop="passwordQ" label="密保问题" width="140">
      </el-table-column>
      <el-table-column prop="passwordA" label="密保答案" width="140">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <button class="edit" @click="handleEdit(scope.row)" style="margin-top: 5px">
            <svg class="css-i6dzq1" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2" stroke="#FFFFFF" height="24" width="24" viewBox="0 0 24 24">
              <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
            </svg>编辑</button>

          <el-popconfirm
                  width="200"
                  class="ml-5"
                  title="您确定删除吗？"
                  confirm-button-type="primary"
                  @confirm="handleDel(scope.row.id)"
          >
            <button class="noselect"  style="border-radius: 50px;" slot="reference">
              <span class="text" style="font-size: 13px;font-weight: normal;">删  除</span>
              <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>
          </span>
            </button>
          </el-popconfirm>
<!--          <el-button type="success" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i> </el-button>-->
<!--          <el-popconfirm-->
<!--              class="ml-5"-->
<!--              title="您确定删除吗？"-->
<!--              @confirm="handleDel(scope.row.id)"-->
<!--          >-->
<!--            <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>-->
<!--          </el-popconfirm>-->
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form>
        <el-form-item label="账号" label-width="80px">
          <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="80px">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="80px">
          <el-input v-model="form.phoneNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密保问题" label-width="80px">
          <el-input v-model="form.passwordQ" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密保答案" label-width="80px">
          <el-input v-model="form.passwordA" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ConsumerManage",
  data(){
    return{
      tableData: [],
      total:0,
      searchData:{},
      account:"",
      pageNum:1,
      pageSize:5,
      dialogFormVisible:false,
      form:{},
      multipleSelection:[],
      headerBg: 'headerBg'
    }
  },
  created() {
    this.load()
  },
  methods:{
    load(){
      this.request.get("http://localhost:9090/consumer/page",{
        params:{
          pageNum: this.pageNum,
          pageSize:this.pageSize,
          account:this.searchData.account
        }
      }).then(res =>{
        this.tableData=res.records
        this.total=res.total
      })
    },
    save(){
      if(this.form.id==null){
        this.form.type = "consumer"
        this.form.state = 1
      }
      this.request.post("http://localhost:9090/consumer/save",this.form).then(res =>{
        if(res){
          this.dialogFormVisible=false;
          this.pageNum=Math.floor(this.total/this.pageSize+1)
          this.reset()
          this.$message.success("保存成功")
        } else{
          this.$message.error("保存失败")
        }
      })
    },
    handleAdd(){
      this.form={}
      this.dialogFormVisible=true;
    },
    handleEdit(row){
      this.form=row
      this.dialogFormVisible=true;
    },
    handleDel(id){
      this.request.delete("http://localhost:9090/consumer/"+id).then(res =>{
        if(res){
          this.dialogFormVisible=false;
          this.reset()
          this.$message.success("删除成功")
        } else{
          this.$message.error("删除失败")
        }
      })
    },
    delBatch(){
      let ids = this.multipleSelection.map(v=> v.id)
      this.request.post("http://localhost:9090/consumer/del/batch",ids).then(res =>{
        if(res){
          this.dialogFormVisible=false;
          this.reset()
          this.$message.success("删除成功")
        } else{
          this.$message.error("删除失败")
        }
      })
    },
    reset(){
      this.searchData= {}
      this.load()
    },
    cancel(){
      this.dialogFormVisible=false
      this.load()
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.load()
    },
    handleCurrentChange(pageNum){
      this.pageNum=pageNum
      this.load()
    },
    handleSelectionChange(val){
      this.multipleSelection=val
    }
  }
}
</script>

<style>
  button.noselect {
    position: relative;
    width: 150px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    background: red;
    border: none;
    border-radius: 10px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
    background: #e62222;
  }

  button.noselect, button span {
    transition: 200ms;
  }

  button.noselect .text {
    transform: translateX(40px);
    color: white;
    font-weight: bold;
    font-size:16px;
  }

  button.noselect .icon {
    position: absolute;
    border-left: 1px solid #c41b1b;
    transform: translateX(110px);
    height: 30px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  button.noselect svg {
    width: 15px;
    fill: #eee;
  }

  button.noselect:hover {
    background: #ff3636;
  }

  button.noselect:hover .text {
    color: transparent;
  }

  button:hover .icon {
    width: 150px;
    border-left: none;
    transform: translateX(0);
  }

  button:focus {
    outline: none;
  }

  button:active .icon svg {
    transform: scale(0.8);
  }
  .icon-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #cdcdcd;
    background: white;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    transition: width 0.2s ease-in-out;
    font-weight: 500;
    font-family: inherit;
  }

  .add-btn:hover {
    width: 120px;
    margin-top:7px
  }
  .add-btn::before,
  .add-btn::after {
    transition: width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
    content: "";
    position: absolute;
    height: 4px;
    width: 10px;
    top: calc(50% - 2px);
    background: seagreen;
  }

  .add-btn::after {
    right: 9px;
    overflow: hidden;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
  }

  .add-btn::before {
    left: 9px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
  }

  .icon-btn:focus {
    outline: none;
  }

  .btn-txt {
    opacity: 0;
    transition: opacity 0.2s;
    font-weight: bold;
    font-size:16px;
  }

  .add-btn:hover::before,
  .add-btn:hover::after {
    width: 4px;
    border-radius: 2px;
  }

  .add-btn:hover .btn-txt {
    opacity: 1;
  }

  .add-icon::after,
  .add-icon::before {
    transition: all 0.2s ease-in-out;
    content: "";
    position: absolute;
    height: 20px;
    width: 2px;
    top: calc(50% - 10px);
    background: seagreen;
    overflow: hidden;
  }

  .add-icon::before {
    left:17px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
  }

  .add-icon::after {
    right: 17px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
  }

  .add-btn:hover .add-icon::before {
    left: 10px;
    height: 4px;
    top: calc(50% - 2px);
  }

  .add-btn:hover .add-icon::after {
    right: 10px;
    height: 4px;
    top: calc(50% - 2px);
  }
  button.edit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-image: linear-gradient(to top, #30cfd0 0%, #42b983 100%);
    border: solid 3px transparent;
    background-clip: padding-box;
    box-shadow: 0px 0px 0px 3px #ffffff00;
    color: white;
    min-height: 43px;
    padding: 0 13px 0 13px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all .5s ease;
    width:150px
  }

  button.edit:active {
    transform: scale(.9);
    transition: all 100ms ease;
  }

  button.edit:hover {
    box-shadow: 0px 0px 0px 3px #42b999;
  }

  button.edit svg {
    width: 16px;
  }
</style>
